<template>
    <div class="create">
        <p class="pageTitle__2aK9Q">创建自定义字段</p>
        <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="110px" size="mini">
            <el-form-item label="字段名称" prop='chineseName'>
                <el-input v-model="createForm.chineseName" placeholder="请输入" :maxlength="120"></el-input>
            </el-form-item>
            <el-form-item label="字段类型" prop='fieldType'>
                <el-select v-model="createForm.fieldType" filterable placeholder="请选择" disabled>
                    <el-option v-for="item in fieldTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联对象" prop='objectFieldId' v-show="createForm.fieldType == 'relevanceProp'">
                <el-select v-model="createForm.objectFieldId" filterable placeholder="请选择"
                    @change="objectFieldIdChange">
                    <el-option v-for="item in gldxOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联字段" prop='correlationField' v-show="createForm.fieldType == 'relevanceProp'">
                <el-select v-model="createForm.correlationField" filterable placeholder="请选择">
                    <el-option v-for="item in glzdOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务对象" prop='businessObject' v-show="createForm.fieldType == 'relevanceObject'">
                <el-select v-model="createForm.businessObject" filterable placeholder="请选择" @change="businessChange">
                    <el-option v-for="item in businessObjectOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示字段" prop='showField' v-show="createForm.fieldType == 'relevanceObject'">
                <el-select v-model="createForm.showField" filterable multiple placeholder="请选择">
                    <el-option v-for="item in showFieldOptions" :key="item.name" :label="item.chineseName"
                        :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设置可选范围" class="table_form_item"
                v-show="createForm.fieldType == 'selectRadio' || createForm.fieldType == 'selectChecked'">
                <el-table :data="createForm.checkBox" style="width: 100%;" border
                    :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}">
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            <el-button icon='el-icon-remove-outline' class='del' @click="tableDal('checkBox',scope.$index)">
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="可选范围">
                        <template slot-scope="scope">
                            <el-popover placement="bottom-start" trigger="click" width="190">
                                <div class="pickerContent">
                                    <span class="colorPicker" v-for="(item,index) in scope.row.colorPickerList"
                                        :key="index" :style="{boxShadow: item + '0px 0px 0px 11px inset'}"
                                        @click="changeColor(item,scope.$index)"></span>
                                </div>
                                <span class="colorPicker" slot="reference"
                                    :style="{boxShadow: scope.row.currentColor + '0px 0px 0px 11px inset'}"></span>
                            </el-popover>
                            <el-input v-model='scope.row.kxfw' placeholder="请输入可选范围" :ref="'input'+ scope.$index">
                            </el-input>
                        </template>
                    </el-table-column>
                    <div slot="empty">
                        <el-empty :image-size="100"></el-empty>
                    </div>
                </el-table>
                <div class='addBox'>
                    <el-button icon='el-icon-circle-plus-outline' class='add' @click='tableAdd'>新增可选项</el-button>
                </div>
            </el-form-item>
            <el-form-item label="数据填充规则" class="table_form_item" v-show="createForm.fieldType == 'relevanceObject'">
                <el-table :data="createForm.fillRule" style="width: 100%;" :show-header='false' class="rule">
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            <el-button icon='el-icon-remove-outline' class='del'
                                @click="tableDal('fillRule',scope.$index)"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column class-name="fromTo">
                        <template slot-scope="scope">
                            <el-form-item class="from"
                                :rules="{ required: true, message: '填充来源值不能为空！',trigger:'change'}"
                                :prop="'fillRule.'+ scope.$index +'.from'">
                                <el-select v-model="scope.row.from" filterable
                                    :placeholder="'请选择' + enumBusiness[createForm.businessObject] + '自定义字段'"
                                    @change="fromClick(scope.row.from,scope.$index)" clearable>
                                    <el-option v-for="item in scope.row.fromOptions" :key="item.id" :label="item.label"
                                        :value="item.id" :disabled='item.disabled'>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" align='center'>
                        <span style="display:flex;width:100%;justify-content:center;">的值填充到</span>
                    </el-table-column>
                    <el-table-column class-name="fromTo">
                        <template slot-scope="scope">
                            <el-form-item class="from"
                                :rules="{ required: true, message: '填充目标值不能为空！',trigger:'change'}"
                                :prop="'fillRule.'+ scope.$index +'.to'">
                                <el-select v-model="scope.row.to" filterable placeholder="请选择出/入库详情自定义字段" clearable>
                                    <el-option v-for="item in scope.row.toOptions" :key="item.id" :label="item.label"
                                        :value="item.id" :disabled='item.disabled'>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <div slot="empty">
                        <el-empty :image-size="100"></el-empty>
                    </div>
                </el-table>
                <div class='addBox'>
                    <el-button icon='el-icon-circle-plus-outline' class='add' :disabled="!createForm.businessObject"
                        @click="addRules">添加规则</el-button>
                </div>
            </el-form-item>
            <el-form-item label="允许扫码输入"
                v-show="createForm.fieldType == 'ipt' || createForm.fieldType == 'relevanceObject'">
                <el-select v-model="createForm.scanCodeInput" filterable
                    :disabled="createForm.fieldType == 'ipt' && enumProp['ipt'][2].disabled">
                    <el-option v-for="item in scanCodeInputOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可修改扫码结果"
                v-show="createForm.fieldType == 'ipt' || createForm.fieldType == 'relevanceObject'">
                <el-select v-model="createForm.modifyScanResult" filterable
                    :disabled="createForm.fieldType == 'ipt' && enumProp['ipt'][2].disabled">
                    <el-option v-for="item in modifyScanResultOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="隐藏条件" v-show="createForm.fieldType">
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" plain @click="addHidden">添加
                </el-button>
                <p>
                    <span class="el-icon-warning-outline"></span>
                    <span>当满足此条件时此字段隐藏</span>
                </p>
            </el-form-item>
            <el-form-item label="字段属性" v-show="createForm.fieldType && enumProp[createForm.fieldType].length"
                prop='fieldAttribute'>
                <el-checkbox-group v-model="createForm.fieldAttribute">
                    <el-checkbox :label="i.label" v-for="(i,index) in enumProp[createForm.fieldType]" :key="index"
                        :disabled='i.disabled' @change="handleChange(i,createForm.fieldType)">
                    </el-checkbox>
                </el-checkbox-group>
                <el-input-number v-model="createForm.precision" controls-position="right"
                    v-show="createForm.fieldType == 'inputNumber' && key=='ws'" :min="1" :max="5"></el-input-number>
            </el-form-item>
            <el-form-item label="引导文字" v-show="createForm.fieldType == 'ipt' || createForm.fieldType == 'inputNumber'
                    || createForm.fieldType == 'selectRadio' || createForm.fieldType == 'selectChecked'">
                <el-input v-model="createForm.guideText" placeholder="填写完显示在框里"></el-input>
            </el-form-item>
            <el-form-item label="提示说明" v-show="createForm.fieldType == 'ipt' || createForm.fieldType == 'inputNumber'
                    || createForm.fieldType == 'selectRadio' || createForm.fieldType == 'selectChecked'">
                <el-input type="textarea" v-model="createForm.tips" maxlength="50" :rows="3" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="显示精度" v-show="createForm.fieldType == 'datePicker'">
                <el-select v-model="createForm.showAccuracy" filterable>
                    <el-option v-for="item in showAccuracyOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="btn">
                    <el-button type="primary" size="mini" plain @click="$router.push('/customFields/inventoryDetails')">取 消
                    </el-button>
                    <el-button type="primary" size="mini" @click="save">保 存</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-dialog :visible.sync="conditionVisible" width="700px" :before-close="handleClose">
            <span slot="title" class="title">隐藏条件</span>
            <div class="formModal__3WcSV">
                <div class="sider__2yPAV">
                    <el-tree :data="treeData" :props="defaultProps" @node-click='nodeClick'
                        :expand-on-click-node='false' ref="treeData"></el-tree>
                </div>
                <div class="content__3UeZl">
                    <div class="header__3oblS">当满足此条件时此字段隐藏</div>
                    <div class="legacy-form" style="height: 320px; margin: 10px; row-gap: 0px;">
                        <div class="legacy-form-control-wrapper">
                            <div class="legacy-form-control">
                                <el-input type="textarea" placeholder="例:${计划数}>10000" v-model="createForm.hidden">
                                </el-input>
                            </div>
                        </div>
                    </div>
                    <div class="footer__18hF6">
                        <p>请从上方面板选择字段或选项；</p>
                        <p>支持英文模式下运算符（+、-、*、/、&lt;、&gt;、==、!=、&lt;=、&gt;=、&amp;&amp;（且）、||（或））</p>
                        <p>参考场景：计划数控件输入的值大于10000时，计划开始时间控件输入的值小于2020.10.1 00:00:00时，
                            需要隐藏当前控件，则可将隐藏条件设置为：计划数&gt;"10000”&amp;&amp;计划开始时间&lt;"2020.10.1 00:00:00".</p>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createField({way:'cancel'})" size="mini">取 消</el-button>
                <el-button type="primary" @click="createField({way:'confirm'})" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        objectField,
        fieldHandle,
        fieldMess,
        showField,
        relationObject,
        fillField
    } from '@/api/customFieldController'
    export default {
        data() {
            var chineseName = (rule, value, callback) => {
                if (!value && rule.field == 'chineseName') {
                    return callback(new Error('字段名称不能为空'));
                } else {
                    callback()
                }
            };
            var fieldType = (rule, value, callback) => {
                if (!value && rule.field == 'fieldType') {
                    return callback(new Error('请选择字段类型'));
                } else {
                    callback()
                }
            };
            var businessObject = (rule, value, callback) => {
                if (!value && this.createForm.fieldType == 'relevanceObject') {
                    return callback(new Error('业务对象不能为空!'));
                } else {
                    callback()
                }
            };
            var showField = (rule, value, callback) => {
                if (!value.length && this.createForm.fieldType == 'relevanceObject') {
                    return callback(new Error('显示字段不能为空!'));
                } else {
                    callback()
                }
            };
            var objectFieldId = (rule, value, callback) => {
                if (!value && this.createForm.fieldType == 'relevanceProp') {
                    return callback(new Error('关联对象不能为空!'));
                } else {
                    callback()
                }
            };
            var correlationField = (rule, value, callback) => {
                if (!value && this.createForm.fieldType == 'relevanceProp') {
                    return callback(new Error('关联字段不能为空!'));
                } else {
                    callback()
                }
            };
            return {
                createForm: {
                    fieldAscription: 'stockMsg',
                    chineseName: '',
                    fieldType: '',
                    checkBox: [],
                    scanCodeInput: false,
                    modifyScanResult: false,
                    fieldAttribute: [],
                    guideText: '',
                    tips: '',
                    hidden: '',
                    precision: 1,
                    showAccuracy: 'yyyy-MM-dd HH:mm:ss',
                    businessObject: '',
                    showField: [],
                    fillRule: [],
                    objectFieldId: '',
                    correlationField: ''
                },
                createRules: {
                    chineseName: [{
                        required: true,
                        validator: chineseName,
                        trigger: 'blur'
                    }],
                    fieldType: [{
                        required: true,
                        validator: fieldType
                    }],
                    businessObject: [{
                        required: true,
                        validator: businessObject
                    }],
                    showField: [{
                        required: true,
                        validator: showField
                    }],
                    objectFieldId: [{
                        required: true,
                        validator: objectFieldId
                    }],
                    correlationField: [{
                        required: true,
                        validator: correlationField
                    }],
                },
                fieldTypeOptions: [{
                        value: 'ipt',
                        label: '文本'
                    },
                    {
                        value: 'inputNumber',
                        label: '数字'
                    },
                    {
                        value: 'datePicker',
                        label: '时间'
                    },
                    {
                        value: 'upload',
                        label: '附件'
                    },
                    {
                        value: 'picture',
                        label: '图片'
                    },
                    {
                        value: 'selectRadio',
                        label: '单选框'
                    },
                    {
                        value: 'selectChecked',
                        label: '复选框'
                    },
                    {
                        value: 'relevanceObject',
                        label: '关联对象'
                    },
                    {
                        value: 'relevanceProp',
                        label: '关联属性'
                    },
                ],
                scanCodeInputOptions: [{
                    value: false,
                    label: '否'
                }, {
                    value: true,
                    label: '是'
                }],
                modifyScanResultOptions: [{
                    value: false,
                    label: '否'
                }, {
                    value: true,
                    label: '是'
                }],
                businessObjectOptions: [{
                    value: 'product',
                    label: '产品'
                }, {
                    value: 'processes',
                    label: '工序'
                }, {
                    value: 'user',
                    label: '用户'
                }],
                showFieldOptions: [],
                gldxOptions: [],
                glzdOptions: [],
                fromOptions:[],
                toOptions:[],
                showAccuracyOptions: [{
                    value: 'yyyy-MM-dd',
                    label: '年-月-日'
                }, {
                    value: 'yyyy-MM-dd HH',
                    label: '年-月-日 时'
                }, {
                    value: 'yyyy-MM-dd HH:mm',
                    label: '年-月-日 时:分'
                }, {
                    value: 'yyyy-MM-dd HH:mm:ss',
                    label: '年-月-日 时:分:秒'
                }],
                conditionVisible: false,
                treeData: [{
                    attributeName: '当前表单',
                    children: []
                }, {
                    attributeName: '用户信息',
                    children: []
                }],
                defaultProps: {
                    children: 'children',
                    label: 'attributeName'
                },
                enumProp: {
                    'ipt': [{
                            key: 'zd',
                            label: '只读',
                            disabled: false
                        },
                        {
                            key: 'dh',
                            label: '多行'
                        }, {
                            key: 'bt',
                            label: '必填',
                            disabled: false
                        }
                    ],
                    'inputNumber': [{
                        key: 'zd',
                        label: '只读',
                        disabled: false
                    }, {
                        key: 'bt',
                        label: '必填',
                        disabled: false
                    }, {
                        key: 'ws',
                        label: '小数位数',
                        flag: false
                    }],
                    'datePicker': [{
                        key: 'zd',
                        label: '只读',
                        disabled: false
                    }, {
                        key: 'bt',
                        label: '必填',
                        disabled: false
                    }],
                    'upload': [{
                        key: 'bt',
                        label: '必填'
                    }],
                    'picture': [{
                        key: 'bt',
                        label: '必填'
                    }],
                    'selectRadio': [{
                        key: 'bt',
                        label: '必填'
                    }],
                    'selectChecked': [{
                        key: 'bt',
                        label: '必填'
                    }],
                    'relevanceObject': [],
                    'relevanceProp': []
                },
                enumBusiness: {
                    unit: '单位',
                    badProduct: '不良品项',
                    product: '产品',
                    processes: '工序',
                    processRoute: '工艺流程',
                    user: '用户'
                },
                key: '',
                currentColor: 'rgb(0,0,0)',
                colorPickerList: [
                    'rgb(61 ,210 ,126)', 'rgb(147 ,181 ,77)', 'rgb(228 ,191 ,83)', 'rgb(250 ,173 ,20)',
                    'rgb(255 ,89 ,80)',
                    'rgb(0 ,173 ,119)', 'rgb(40 ,194 ,228)', 'rgb(0 ,185 ,190)', 'rgb(24 ,144 ,255)',
                    'rgb(116 ,130 ,229)'
                ],
                enumAttribute: {
                    '只读': {
                        key: 'disabled',
                        val: true
                    },
                    '必填': {
                        key: 'required',
                        val: true
                    },
                    '多行': {
                        key: 'type',
                        val: 'textarea'
                    },
                    '小数位数': {
                        key: 'precision',
                        val: 1
                    }
                },
                enumAttributeCompile: {
                    disabled: '只读',
                    required: '必填',
                    type: '多行',
                    precision: '小数位数',
                },
                hidden: '',
                objectFieldArr:[]
            }
        },
        mounted() {
            this.getFieldMess({
                id: this.$route.query.id
            })
            this.getObjectField()
            
        },
        methods: {
            //自定义字段详情
            getFieldMess(data) {
                fieldMess(data).then(res => {
                    let compileCheckBox = JSON.parse(res.data.checkBox)
                    let compileFillRule = JSON.parse(res.data.fillRule)
                    let compileArr = JSON.parse(res.data.fieldAttribute)
                    this.createForm.fieldAttribute = Object.keys(compileArr).map(i => { //将字段属性先解析成['只读'---]格式
                        return this.enumAttributeCompile[i]
                    })
                    let isPrecision = this.createForm.fieldAttribute.indexOf('小数位数') != -1 //解析后的数组中是否有‘小数位数’
                    this.fieldText = this.createForm.fieldAttribute.find(i => i == '只读' || i ==
                        '必填') //解析后的数组中包含‘只读’ || ‘必填时’ 赋值给'fieldText'
                    this.createForm.fieldAttribute.length && this.enumProp[res.data.fieldType].length &&
                        this.enumProp[res.data.fieldType].forEach(i => {
                            //‘只读’--‘必填’互斥   其余字段属性勾选状态根据后端返回状态判定即可
                            //当i.label != this.fieldText 即循环到某一项 如: ‘只读’时 但是fieldText 也为‘只读’时 跳过循环,将‘必填’禁用
                            //this.fieldText 一定要判断是否有值 否则当选项中只有‘多行’--‘小数位数’等等时 ‘只读’‘必填’会被禁用
                            if (i.disabled != undefined && this.fieldText && i.label != this.fieldText) i
                                .disabled = true
                        })
                    if (res.data.fieldType == 'inputNumber' && isPrecision) { //当字段类型为数字时--控制小数位数的输入框值以及修改数据的状态
                        this.enumProp[res.data.fieldType].forEach(i => {
                            if (i.key == 'ws') i.flag = true
                        })
                        this.createForm.precision = compileArr.precision
                        this.key = 'ws'
                    }
                    this.createForm.checkBox = compileCheckBox.map((i, index) => {
                        this.$nextTick(() => { //DOM 更新循环结束之后 修改输入框内的值颜色
                            this.$refs['input' + index].$el.children[0].style.color = i.color
                        })
                        return {
                            kxfw: i.value,
                            currentColor: i.color,
                            colorPickerList: this.colorPickerList,
                        }
                    })
                    this.createForm.scanCodeInput = res.data.scanCodeInput
                    this.createForm.modifyScanResult = res.data.modifyScanResult
                    this.createForm.guideText = res.data.guideText
                    this.createForm.tips = res.data.tips
                    this.createForm.showAccuracy = res.data.showAccuracy
                    this.createForm.chineseName = res.data.chineseName
                    this.createForm.fieldType = res.data.fieldType
                    this.createForm.businessObject = res.data.businessObject
                    this.createForm.hidden = res.data.hidden
                    this.hidden = res.data.hidden
                    //关联属性--关联对象
                    this.createForm.fieldType == 'relevanceProp' && this.getRelationObject({type:'stockMsg'},res.data.objectFieldId,res.data.correlationField)
                    //获取填充来源值
                    this.createForm.fieldType == 'relevanceObject' && this.getFillField({type:res.data.businessObject})
                    //获取填充目标值
                    this.createForm.fieldType == 'relevanceObject' && this.getToOptions({type:'stockMsg'})
                    //初始化显示字段
                    this.createForm.fieldType == 'relevanceObject' && this.getShowField(_,res.data.businessObject)
                    this.createForm.showField = JSON.parse(res.data.showField)
                    setTimeout(()=>{
                        this.createForm.fillRule = compileFillRule.map(i =>{
                            return {
                                from:i.from,
                                to:i.to,
                                fromOptions:this.fromOptions,
                                toOptions:this.toOptions
                            }
                        })
                        //先深拷贝一份数据，在拷贝后的数据修改状态等，否则再添加规则时 'fromOptions' -- 'toOptions' 里的状态会被改变
                        let fillRule = JSON.parse(JSON.stringify(this.createForm.fillRule)) 
                        fillRule.forEach(i =>{
                            i.fromOptions.forEach(k =>{ //将选中的来源值以外的选项全部禁用
                                if(k.value != i.from) k.disabled = true
                            })
                            //找到选中来源值的字段类型去禁用相对应的填充值字段类型
                            let type = i.fromOptions.find(y => y.id == i.from)
                            i.toOptions.forEach(i =>{
                                if(i.value != type.value) i.disabled = true //填充目标值类型和来源值类型需要保持一致
                            })
                        })
                        this.createForm.fillRule = fillRule
                    },1000)
                })
            },
            //获取填充目标值
            getToOptions(data){
                fillField(data).then(res => {
                    this.toOptions = res.data.map(i =>{
                        return{
                            id:i.id,
                            value:i.fieldType,
                            label:i.chineseName,
                            disabled:false
                        }
                    })
                })
            },
            //关联业务对象字段列表
            getObjectField(data) {
                objectField(data).then(res => {
                    res.data.find(i => {
                        if (i.businessObjectName == '出入库明细') {
                            this.treeData[0].children = i.attributes
                        } else if (i.businessObjectName == '用户') {
                            this.treeData[1].children = i.attributes
                        }
                    })
                    this.objectFieldArr = res.data
                })
            },
            //数据填充规则字段下拉
            getFillField(data) {
                fillField(data).then(res => {
                    this.fromOptions = res.data.map(i => {
                        return {
                            id: i.id,
                            value: i.fieldType,
                            label: i.chineseName,
                            disabled: false
                        }
                    })
                })
            },
            //自定义字段操作
            getFieldHandle(data) {
                fieldHandle(data).then(res => {
                    if(res.code == 200){
                        this.$router.push('/customFields/inventoryDetails')
                    }
                })
            },
            //关联对象--显示字段
            getShowField(data,val) {
                this.createForm.showField = [] //先置空
                showField(data,val).then(res => {
                    let temp
                    temp = res.data.find(i => i.businessType == val)
                    this.showFieldOptions = temp.down
                })
            },
            //关联属性中关联对象
            getRelationObject(data,id,correlationField) {
                relationObject(data,id,correlationField).then(res => {
                    this.gldxOptions = res.data.map(i =>{
                        return {
                            value:i.id,
                            label:i.chineseName,
                            businessObject:i.businessObject
                        }
                    })
                    this.createForm.objectFieldId = id
                    this.objectFieldIdChange(id,correlationField)
                })
            },
            nodeClick(node) {
                if (node.attributeName != '当前表单' && node.attributeName != '用户信息') {
                    this.createForm.hidden += node.attributeOther
                }
            },
            //取消--确定
            createField(payload) {
                if (payload.way == 'cancel') {
                    this.createForm.hidden = ''
                } else {
                    this.hidden = this.createForm.hidden
                }
                this.conditionVisible = false
            },

            //添加隐藏条件
            addHidden() {
                this.createForm.hidden = this.hidden
                this.conditionVisible = true
            },

            //颜色选择
            changeColor(item, index) {
                this.createForm.checkBox[index].currentColor = item
                this.$refs['input' + index].$el.children[0].style.color = item //输入框文字颜色变化
            },
            //复选框
            handleChange(item, type) {
                if (item.key == 'ws') { //控制小数位数计数器显示隐藏
                    item.flag = !item.flag
                    this.key = item.flag ? 'ws' : ''
                    this.createForm.precision = 1
                }
                if (item.key == 'zd' && type == 'ipt') { //当复选框为文本时且选中只读时 --允许扫码--修改扫码 状态置为false
                    this.createForm.scanCodeInput = false
                    this.createForm.modifyScanResult = false
                }
                this.enumProp[type].length && this.enumProp[type].forEach(i => {
                    if (i.disabled != undefined) {
                        if (item.key == 'zd' || item.key == 'bt') {
                            i.disabled = i.key == item.key ? i.disabled : !i.disabled
                        }
                    }
                })
            },
            //来源值填充
            fromClick(val, index) {
                this.createForm.fillRule[index].fromOptions.forEach(i => {
                    if (val == '') {
                        i.disabled = false //移除选中值 将所有状态置为false
                        this.createForm.fillRule[index].to = ''
                    } else if (i.value != val) {
                        i.disabled = true
                    }
                })
                //找到选中来源值的字段类型去禁用相对应的填充值字段类型
                let type = val != '' && this.createForm.fillRule[index].fromOptions.find(i => i.id == val)
                type && this.createForm.fillRule[index].toOptions.forEach(i => {
                        if (i.value != type.value) i.disabled = true //填充目标值类型和来源值类型需要保持一致
                    })
                //当来源值移除的时候将填充值状态全部置为false
                !type && this.createForm.fillRule[index].toOptions.forEach(i => i.disabled = false)
            },
            //新增可选项
            tableAdd() {
                this.createForm.checkBox.push({
                    kxfw: '',
                    currentColor: this.currentColor,
                    colorPickerList: this.colorPickerList
                })
            },
            //添加规则
            addRules() {
                let fromOptions = JSON.parse(JSON.stringify(this.fromOptions))
                let toOptions = JSON.parse(JSON.stringify(this.toOptions))
                this.createForm.fillRule.push({
                   from:'',
                   to:'',
                   fromOptions,
                   toOptions
                })
            },
            //删除
            tableDal(ref,index) {
                this.createForm[ref].splice(index, 1)
            },
            //业务对象
            businessChange(val){
                this.createForm.fillRule = [] //置空填充规则
                this.getShowField(_,val)
                this.getFillField({type:val})
            },
            //关联对象change
            objectFieldIdChange(val,correlationField){
                let businessObject = this.gldxOptions.find(i => i.value == val)
                let correlation = this.objectFieldArr.find(i => i.businessObjectCode == businessObject.businessObject)
                this.glzdOptions = correlation.attributes.map(i =>{
                    return {
                        value:i.attributeCode,
                        label:i.attributeName
                    }
                })
                this.createForm.correlationField = correlationField
            },
            //判断是否有重复值
            isRepeat(arr) {
                let hash = {}
                let isReturn = false
                arr.forEach(i => {
                    if (i.kxfw != '' && hash[i.kxfw]) {
                        this.utils.showMsg('选项不能重复', 'error')
                        isReturn = true
                    }
                    hash[i.kxfw] = true
                })
                return isReturn //返回是否选项重复的标识 -- true 代码return 结束执行
            },
            handleClose() {
                this.conditionVisible = false
                this.createForm.hidden = ''
            },
            //保存
            save() {
                this.$refs.createForm.validate(valid => {
                    if (valid) {
                        let data = {
                            id: this.$route.query.id,
                            ...this.createForm
                        }
                        let fieldAttribute = {}
                        data.fieldAttribute.forEach(i => { //字段属性勾选某字段带相应字段的信息
                            fieldAttribute[this.enumAttribute[i].key] =
                                this.enumAttribute[i].key == 'precision' ? this.createForm.precision :
                                this.enumAttribute[i].val
                        })

                        //单选框--复选框
                        if (this.createForm.fieldType == 'selectRadio' || this.createForm.fieldType ==
                            'selectChecked') {
                            if (!data.checkBox.length) {
                                this.utils.showMsg('选项不能为空', 'error')
                                return
                            }
                            if (data.checkBox.every(i => i.kxfw == '')) { //可选范围最少有一项有值
                                this.utils.showMsg('选项不能为空', 'error')
                                return
                            }
                            //选项不能重复
                            if(this.isRepeat(data.checkBox)) return
                            data.checkBox = this.createForm.checkBox.map(i => {
                                return {
                                    value: i.kxfw,
                                    color: i.currentColor
                                }
                            })
                            data.checkBox = data.checkBox.filter(i => i.value != '') //数组中值为空的过滤掉 不传给后台
                        }
                        //关联对象
                        if(this.createForm.fieldType == 'relevanceObject'){
                            data.fillRule = this.createForm.fillRule.map(i =>{
                                return {
                                    from:i.from,
                                    to:i.to
                                }
                            })
                        }
                        data.showField = JSON.stringify(data.showField)
                        data.fillRule = JSON.stringify(data.fillRule)
                        data.checkBox = JSON.stringify(data.checkBox)
                        data.fieldAttribute = JSON.stringify(fieldAttribute)
                        this.getFieldHandle(data)
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .create {
        padding: 20px;
        height: calc(100% - 50px);
        overflow: auto;

        .pageTitle__2aK9Q {
            font-size: 16px;
            padding-bottom: 20px;
        }

        .el-form {
            width: 400px;

            .el-select {
                width: 100%;
            }

            /deep/ .el-input-number--mini {
                width: calc(100% - 20px);
                margin-left: 20px;
            }

            p {
                span {
                    color: rgba(0, 0, 0, 0.5);
                }
            }

            /deep/ .el-input__inner {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .btn {
                display: flex;

                .el-button {
                    flex: 1;
                }
            }

            .el-form-item__label {
                font-family: sans-serif;
            }

            .el-checkbox-group {
                display: flex;
                flex-direction: column;
            }

            .del {
                color: red !important;
                border: none;
                font-size: 18px;
                padding: 0;
                display: flex;
                justify-content: center;
                width: 100%;
                background: transparent;
            }

            .addBox {
                background: #fff;
                border: 1px solid #e8e8e8;
                color: #02b980;
                font-size: 12px;
                display: flex;
                align-items: center;
                padding: 10px 16px;
                cursor: pointer;
                border-top: none;

                /deep/ .el-button.add {
                    display: flex;

                    span {
                        display: inline-block;
                        height: 16px;
                        font-size: 12px;
                        line-height: 18px;
                    }
                }

                .add {
                    color: #02b980;
                    border: none;
                    background: transparent;
                    font-size: 16px;
                    padding: 0;
                }

                .el-button.is-disabled.add {
                    opacity: 0.4;
                }
            }

            .el-form-item.table_form_item {

                /deep/ .el-form-item__content {
                    width: 550px;
                }

                /deep/ .el-table .cell {
                    display: flex;
                    align-items: center;
                }

                .colorPicker {
                    cursor: pointer;
                    width: 22px;
                    height: 20px;
                    border-radius: 50%;
                    margin-right: 10px;
                    display: inline-block;
                    margin-top: 5px;
                }
            }

            .el-form-item.from{
                width: 100%;

                /deep/ .el-form-item__content{
                    width: 100%;
                }
            }

            .el-table.rule {
                border: 1px solid #e8e8e8;
                border-bottom: none;
            }

            /deep/ .fromTo.el-table__cell{
                padding: 20px 0 0 0;
            }
        }

        .el-dialog__header {
            .title {
                color: rgba(0, 0, 0, .85);
                font-weight: 500;
                font-size: 14px;
                font-family: sans-serif;
            }
        }

        /deep/ .el-dialog__body {
            padding: 10px 20px;
        }

        .formModal__3WcSV {
            display: flex;
            border: 1px solid #edeef3;
            background: #fbfbfb;
            border-radius: 2px;

            .sider__2yPAV {
                width: 30%;
                height: 519px;
                border-right: 1px solid #edeef3;
                padding-top: 10px;
                flex-shrink: 0;
                overflow: auto;

                .el-tree {
                    background: transparent;
                }
            }

            .content__3UeZl {
                background-color: #fff;

                .header__3oblS {
                    color: #faad14;
                    text-align: center;
                    line-height: 32px;
                    border-radius: 2px;
                    background-color: #fef6e7;
                    margin: 10px;
                }

                .legacy-form {
                    /deep/ .el-textarea {
                        height: 304px;
                        max-height: 304px;
                        overflow-y: hidden;

                        .el-textarea__inner {
                            height: 100%;
                            font-size: 12px;
                            color: rgba(0, 0, 0, .85);
                            font-family: sans-serif;
                        }
                    }
                }

                .footer__18hF6 {
                    color: #999;
                    border-top: 1px solid #edeef3;
                    padding: 10px;
                }
            }
        }
    }
</style>